<template>
    <div class="home-body">

        <FullHeadImg back-image="home/home_head.png" class="home-introduce">
            <template #default>
                <h1>
                    Connect you with the world economy
                </h1>
                <p>
                    Leveraging our advanced technology stack and extensive payment infrastructure, we offer the
                    fastest
                    and most secure way to move your money globally. At the same time, we empower you to capitalize
                    on
                    money flows by providing exclusive access to world-class investment opportunities.
                </p>
            </template>
        </FullHeadImg>

        <section class="body-m home-global-payment">
            <div class="section-header">
                <h2>Global Payment powered by <br> robust SWIFT network and modern blockchain
                </h2>
                <p>Honeybee collaborates with top-tier global transaction banks,
                    licensed payment service providers, and leading liquidity partners to deliver seamless, secure,
                    and
                    efficient global collections and payouts. Our footprint spreads across more than 28 countries
                    and
                    continues to grow。
                </p>
            </div>
            <div class="section-middle">
                <div class="section-middle-item">
                    <h3>A legacy you can trust
                    </h3>
                    <div class="section-middle-content">Built on SWIFT and a vast network of correspondent banks,
                        traditional payment rails ensure secure and reliable transactions—where redundancy drives
                        resilience.
                    </div>
                </div>
                <div class="section-middle-item">
                    <h3>And modern technology you can benefit from
                    </h3>
                    <div class="section-middle-content">Stablecoins move money at the speed of the internet,
                        overcoming
                        traditional banking inefficiencies. By integrating Stablecoin with fiat, Honeybee delivers
                        cross-border payments faster, cheaper, and it’s built for the global economy
                    </div>
                </div>
            </div>
            <map-view map-type="home" />
        </section>

        <section class="full-bg">
            <div class="home-otc body-m">
                <div class="section-header">
                    <h2>Institutional OTC</h2>
                    <p>Stablecoin has become a critical layer of modern payment
                        infrastructure,
                        Institutional OTC supplements Honeybee’s Global Payment Infrastructure, allowing us to move
                        money
                        faster, smarter and cheaper
                    </p>
                </div>
                <div class="otc-content">
                    <img :src="getImage('home/home2.png')" alt="">

                    <div class="otc-content-des">
                        <h3 class="otc-content-title">Unlock Institutional-Grade Crypto Trading with Our OTC Desk
                        </h3>
                        <p>Experience seamless execution and deep liquidity, tailored to your needs. Our OTC desk
                            doesn’t
                            just execute — we optimize. Leveraging our vast liquidity network and real-time market
                            access,
                            we deliver competitive pricing, minimal slippage, and bespoke solutions — whether you're
                            trading
                            spot crypto, Stablecoins, or with fiat pairs.
                             
                        </p>
                    </div>
                </div>
                <find-out-more :to-name="'otc'" />
            </div>
        </section>

        <section class="home-marketplace body-m">
            <div class="marketplace-header">
                <h2>Bridge the Best of Both Worlds: Diversify Across Crypto &
                    Traditional Assets
                </h2>
                <p>The future of investing isn’t either crypto or traditional
                    assets — it’s both! Why choose? Invest across borders, markets, and asset classes — seamlessly. 
                </p>
            </div>
            <div class="marketplace-content">
                <div class="marketplace-desc">
                    <div>Our platform unlocks high-growth opportunities across digital assets (DeFi, Stablecoins, RWA)
                        and real-world assets (real estate, private equity, and yield-generating funds).
                    </div>
                    <div>
                        Today’s most forward-thinking portfolios don’t choose between digital and traditional assets —
                        they blend both. Whether you’re hedging volatility with tangible assets or capturing crypto’s
                        explosive upside, we provide institutional-grade access, tailored liquidity, and smarter
                        diversification.
                    </div>
                    <div>
                        We’re not just observers of the financial revolution – we’re building it. We partner with
                        creators, entrepreneurs and idealists who share our bold vision for the future. Beyond just
                        investing, we actively:
                    </div>
                    <div>
                        <ul>
                            <li>Back disruptive technologies reshaping finance
                            </li>
                            <li>Support innovators advancing the cryptosphere
                            </li>
                            <li>Build infrastructure for tomorrow’s asset landscape
                            </li>
                        </ul>
                    </div>
                </div>
                <img :src="getImage('home/home3.png')" alt="">
            </div>
            <find-out-more :to-name="'investment'" />
        </section>

        <section class="full-bg">
            <div class="all-in-one body-m">
                <h2>All in one platform</h2>

                <swiper :slides-per-view="1" :space-between="0" :loop="true" :autoplay="{
                    delay: 5000,
                    disableOnInteraction: false,
                }" :navigation="!isSmallScreen" :pagination="isSmallScreen" :modules="modules" class="home-carousel">

                    <swiper-slide v-for="(item, idx) in homeConfig.allInOnePlatform" :key="idx" class="platform-item">
                        <img :src="getImage(item.image)" alt="">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.desc }}</p>
                        <div v-if="isSmallScreen"></div>
                    </swiper-slide>

                </swiper>
            </div>
        </section>

        <UKDialogView />
    </div>
</template>

<script setup lang="ts" name="Home">
import MapView from '@/components/MapView.vue';
import homeConfig from '@/utils/homeConfig';
import { Navigation, Pagination, Autoplay, A11y } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { useScreenSize } from '@/utils/useScreenSize';
import UKDialogView from '@/components/UKDialogView.vue';
import FindOutMore from '@/components/FindOutMore.vue';

const { isSmallScreen } = useScreenSize()
const modules = [Navigation, Pagination, Autoplay, A11y];

</script>

<style scoped lang="scss">
.home-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5rem;
}

.home-introduce {
    height: calc(100vh - var(--nav-height));
    aspect-ratio: none;
    padding: 0;
}

.home-global-payment {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;

    .section-header {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        text-align: center;
    }

    .section-middle {
        display: flex;
        gap: 2rem;

        .section-middle-item {
            background-color: #f8f7f3;
            border-radius: 20px;
            width: 50%;
            padding: 2rem;
        }

        h3 {
            padding-bottom: 1rem;
        }
    }

    .section-map {
        width: 100%;
    }
}

.home-otc {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 4rem 0;
    position: relative;

    .section-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        p {
            text-align: center;
        }
    }

    .otc-content {
        display: flex;
        align-items: center;
        gap: 2rem;

        img {
            width: 40%;
        }

        .otc-content-des {

            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
    }
}


.home-marketplace {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;

    .marketplace-header {
        text-align: center;
        padding: 0 2rem;

        p {
            font-size: 1.1rem;
            padding-top: 2rem;
        }
    }

    .marketplace-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        padding-top: 2rem;

        .marketplace-desc {
            width: 50%;

            div {
                padding-bottom: 1rem;

                ul {
                    list-style: disc;
                    padding-left: 2rem;
                }
            }
        }

        img {
            width: 50%;
        }
    }
}

.all-in-one {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0;

    .home-carousel {
        width: 100%;
        display: flex;
        flex-direction: row;

        .platform-item {
            height: min(auto, calc(100vh - var(--nav-height) - 100px));
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: start;

            img {
                height: 65%;
                width: 100%;
                margin: 0 auto;
                object-fit: contain;
                object-position: center;
            }

            div {
                padding-bottom: 1rem;
            }
        }
    }
}

@media (max-width: 1000px) {

    .home-body {
        gap: 2rem;
    }

    .home-body>* {
        gap: 2rem;
    }

    .home-global-payment {
        .section-header {
            gap: 2rem;
        }

        .section-middle {
            flex-direction: column;

            .section-middle-item {
                width: 100%;
            }
        }
    }

    .home-otc {
        padding: 2rem 0;

        .otc-content {
            flex-direction: column;

            img {
                width: 90%;
            }

            .otc-content-des {
                gap: 1rem;
            }
        }
    }

    .home-marketplace {

        .marketplace-content {
            flex-direction: column-reverse;
            gap: 1rem;
            padding-top: 0;

            .marketplace-desc {
                width: 100%;
            }

            img {
                width: 90%;
            }
        }
    }
}
</style>